<template>
  <!-- artivles.vue 专用组件 -->
  <div class="container">
    <el-dialog title="题目预览" :visible="showDialog" @close="btnCancel">
      <el-row style="margin-bottom: 20px">
        <el-col :span="5">
          【题型】 :
          {{ titlePreview.questionType | formatQT }}
        </el-col>
        <el-col :span="5"> 【编号】 : {{ titlePreview.id }} </el-col>
        <el-col :span="5">
          【难度】 : {{ titlePreview.difficulty | formatDfct }}
        </el-col>
        <el-col :span="5"> 【标签】 : {{ titlePreview.tags }} </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col :span="5"> 【学科】 : {{ titlePreview.subjectName }} </el-col>
        <el-col :span="5"> 【目录】 : {{ titlePreview.catalogID }} </el-col>
        <el-col :span="5"> 【方向】 : {{ titlePreview.direction }} </el-col>
      </el-row>
      <hr />
      <div class="subject">
        【题干】：
        <p class="question"><span v-html="titlePreview.question"></span></p>
        <p>
          {{ titlePreview.questionType | formatQT }}题
          选项：（以下选中的选项为正确答案）
        </p>
        <el-checkbox
          style="display:block;padding:3px"
          v-for="item in titlePreview.options"
          :key="item.id"
          v-model="item.isRight === 1"
          >{{ item.code }}
        </el-checkbox>
      </div>
      <div class="answer">
        【参考答案】：
        <el-button type="danger" @click="showVideo = true"
          >视频答案预览</el-button
        >
        <div v-if="showVideo" class="videoDIV">
          <video controls="controls" class="video" :src="titlePreview.videoURL">
            <!-- 解决 GET https://v-cdn.zjol.com.cn/276984.mp4 403 (Forbidden) -->
            <meta name="referrer" content="never" />
          </video>
        </div>
      </div>
      <el-row>【答案解析】: <span v-html="titlePreview.answer"></span></el-row>
      <hr />
      <el-row
        >【题目备注】: {{ titlePreview.remarks }}
        <!-- 底部 -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="btnCancel">
            关 闭
          </el-button>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from "@/api/hmmm/constants";
import { detail } from "@/api/hmmm/questions.js";
export default {
  data() {
    return {
      showDialog: false,
      titlePreview: {},
      showVideo: false
    };
  },
  filters: {
    // 去除标签
    removeHtmlTag(str) {
      return str.replace(/<[^>]+>/g, "");
    },
    formatQT(qt) {
      // console.log(this.questionType);
      const temp = questionType.find(item => item.value == qt);
      // console.log(label);
      return temp ? temp.label : '';
    },
    formatDfct(dfct) {
      const temp = difficulty.find(item => item.value == dfct);
      return temp ? temp.label : '';;
    }
  },
  methods: {
    async loadDetail(id) {
      this.showDialog = true;
      const res = await detail({ id });
      this.titlePreview = res.data;
    },
    btnCancel() {
      this.showDialog = false;
      this.showVideo = false;
    }
  }
};
</script>

<style scoped>
body {
  font-size: 14px;
}
.secLine {
  padding-top: 10px;
}

.question {
  color: blue;
}
.videoDIV {
  width: 60%;
  height: 60%;
}
.video {
  width: 100%;
  height: 100%;
}
.dialog-footer {
  text-align: right;
}

.type,
.subject,
.answer,
.analysis {
  padding: 8px 0;
  border-bottom: 1px solid #000;
}
</style>
